<template>
  <div class="box">
    <Header />
    <div class="search">
      <div class="search-box">
        <form action="/">
          <van-search
            class="van-search"
            v-model="value"
            show-action
            placeholder="商品搜索"
            @search="onSearch"
            @cancel="onCancel"
            @input="inputVal"
          />
        </form>
      </div>
    </div>
    <div class="changeShow" v-if="status == 'changeShow'">
      <div class="history" v-if="historyShow">
        <div class="header">
          <div>历史记录</div>
          <div @click="del"><van-icon name="delete" size="16" /></div>
        </div>
        <div class="item">
          <div v-for="(item, index) in history" :key="index">
            {{ item.keyword }}
          </div>
        </div>
      </div>
      <div class="indexaction">
        <div class="header">热门搜索</div>
        <div class="item">
          <div
            v-for="(item, index) in indexaction"
            :key="index"
            @click="hotSearch(item.keyword)"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>
    </div>
    <div class="searchTips" v-if="status == 'searchTips'">
      <div class="list" v-if="tips != ''">
        <div
          class="li"
          v-for="item in tips"
          :key="item.id"
          @click="tipsAdd(item.name)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="null" v-else>数据库暂无此类商品</div>
    </div>
    <div class="goods" v-if="status == 'goods'">
      <div class="header">
        <div>综合</div>
        <div>价格</div>
        <div>分类</div>
      </div>
      <div class="main">
        <div class="item">
          <img :src="goods.list_pic_url" alt="" />
          <p>{{ goods.name }}</p>
          <p class="price">{{ goods.retail_price }}元</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header/header.vue";
import {
  indexaction,
  serachTips,
  addhistory,
  clearhistory,
} from "@/api/home/search/index.js";
// import { Toast } from "vant";
export default {
  components: {
    Header,
  },
  data() {
    return {
      value: "",
      indexaction: "",
      history: "",
      status: "changeShow",
      tips: "",
      openId: "",
      historyShow: null,
      goods: "",
    };
  },
  created() {
    let openId = localStorage.getItem("openId");
    this.openId = openId;
    indexaction({ openId: openId }).then((res) => {
      if (res.historyData.length == 0) {
        this.historyShow = false;
      } else {
        this.historyShow = true;
      }
      this.history = res.historyData;
      this.indexaction = res.hotKeywordList;
      console.log(res);
    });
  },
  methods: {
    tipsAdd(v) {
      this.value = v;
      this.addhistory(this.value);
      this.goods = this.tips.filter((el) => el.name == v)[0];
      this.status = "goods";
    },
    hotSearch(v) {
      this.addhistory(v);
    },
    del() {
      clearhistory({
        openId: this.openId,
      }).then((res) => {
        if (res.data == "清除成功") {
          this.history = null;
          this.historyShow = false;
        }
      });
    },
    searchInit() {
      serachTips({ keyword: this.value, order: "asc" }).then((res) => {
        console.log(res);
        this.tips = res.keywords;
      });
    },
    addhistory(v) {
      addhistory({ keyword: v, openId: this.openId }).then((res) => {
        console.log(res);
        if (res.data == "success") {
          indexaction({ openId: this.openId }).then((res) => {
            if (res.historyData.length == 0) {
              this.historyShow = false;
            } else {
              this.historyShow = true;
            }
            this.history = res.historyData;
          });
        }
      });
    },
    inputVal() {
      if (this.value) {
        this.status = "searchTips";
        this.searchInit(this.value);
      } else {
        this.status = "changeShow";
      }
    },
    onSearch(val) {
      this.addhistory(val);
    },
    onCancel() {},
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.box {
  background-color: #f4f4f4;
}
.search {
  width: 375px;
  padding: 10px 8px 10px 12px;
  box-sizing: border-box;
  background-color: #fff;
  .search-box {
    padding-left: 12px;
  }
}

.changeShow {
  .history {
    background-color: #fff;
    margin-top: 10px;
    padding: 16px;
    color: #000;
    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
    .item {
      display: flex;
      flex-wrap: wrap;
      div {
        font-size: 12px;
        margin-bottom: 10px;
        margin-right: 10px;
        padding: 5px;
        border: 0.5px solid #999;
      }
      div:nth-child(1) {
        color: #b4282d;
        border: 0.5px solid #b4282d;
      }
    }
  }

  .indexaction {
    background-color: #fff;
    margin-top: 10px;
    padding: 16px;
    color: #000;
    .header {
      margin-bottom: 15px;
      text-align: left;
    }
    .item {
      display: flex;
      flex-wrap: wrap;
      div {
        font-size: 12px;
        margin-bottom: 10px;
        margin-right: 10px;
        padding: 5px;
        border: 0.5px solid #999;
      }
      div:nth-child(1) {
        color: #b4282d;
        border: 0.5px solid #b4282d;
      }
    }
  }
}
.searchTips {
  padding: 0 16px;
  text-align: left;
  background-color: #fff;
  color: #000;
  .list {
    div {
      padding: 10px 0;
    }
  }
  .null {
    padding-top: 150px;
    text-align: center;
  }
}
.goods {
  .header {
    background-color: #fff;
    border-bottom: 1px solid #cccccc;
    display: flex;
    & > div {
      width: 33%;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
  .main {
    background-color: #fff;
    .item {
      width: 50%;
      padding: 10px 0;
      margin-bottom: 0.5%;
      text-align: center;
      background-color: #fff;
    }
    img {
      width: 100%;
    }
    .price {
      color: red;
      font-size: 14px;
    }
  }
}
</style>